import React, { forwardRef, useContext } from "react"
import { ConfigContext } from "../config-provider"
import { cs } from "@/utils"
import "./style/index.css"
/**
 * 分割线
 * @param {object} props
 * @param {React.RefObject} ref
 * @param {'horizontal' | 'vertical'} [props.type] 分割线的类型，是水平还是竖直
 * @param {string | string[]} [props.className] 节点类名
 * @param {React.CSSProperties} [props.style] 节点样式
 * @param {	'left' | 'right' | 'center'} [props.orientation] 分割线文字的位置
 * @returns {React.ReactNode}
 */
const DividerComponent = (props, ref) => {
    const { type = "horizontal", style, className, orientation = "center", children } = props
    const { getPrefixCls } = useContext(ConfigContext)
    const prefixCls = getPrefixCls("divider")
    const classNames = cs(
        prefixCls,
        `${prefixCls}-${type}`,
        {
            [`${prefixCls}-with-text`]: children,
            [`${prefixCls}-with-text-${orientation}`]: children && orientation
        },
        className
    )

    return <div
        ref={ref}
        role="separator"
        style={style}
        className={classNames}
    >
        {
            children && type === "horizontal" && <span className={`${prefixCls}-text ${prefixCls}-text-${orientation}`}>{children}</span>
        }
    </div>
}

const Divider = forwardRef(DividerComponent)
Divider.displayName = "Divider"
export default Divider